<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美食管理</title>
    <script type="text/javascript" src="/js/jquery-2.1.4.js" ></script>
    <script type="text/javascript" src="/js/vue.js" ></script>
    <!-- 引入样式 -->
    <link type="text/css" rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="/element-ui/lib/index.js"></script>
    <style>
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
        .camp_img{
            width: 200px;
            margin-right: 20px;
        }
        .search{
            width: 200px;
        }
    </style>
</head>
<body>
<div id="div">
    <el-button type="success" @click="addDialogVisible = true">新增营地信息</el-button>
    <el-input class="search" placeholder="请输入城市名："  clearable suffix-icon="el-icon-search" v-model="cityName"></el-input>
    <el-input class="search" placeholder="请输入营地名："  clearable suffix-icon="el-icon-search" v-model="campName"></el-input>
    <el-button type="primary" @click="selectCamp()">查询</el-button>
    <!--新增camp模态框-->
    <el-dialog
            title="提示"
            :visible.sync="addDialogVisible"
            width="30%"
            :before-close="handleClose">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
            </span>
    </el-dialog>
    <template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <img class="camp_img" :src="props.row.url" />
                        <el-form-item label="营地介绍">
                            <span>{{ props.row.introduce }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="营地 ID" prop="campId">
            </el-table-column>
            <el-table-column label="营地名称" prop="campName">
            </el-table-column>
            <el-table-column label="电话" prop="tel">
            </el-table-column>
            <el-table-column label="地址" prop="address">
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button type="primary" size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageIndex"
                :page-sizes="[2, 4, 6, 8]"
                :page-size="page.number"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.dataCount">
        </el-pagination>
    </template>
</div>
<script type="text/javascript">
    new Vue({
        el:"#div",
        data:{
            cityName:'',
            campName:'',
            //定义集合存储营地信息
            tableData:[],
            page: {
                pageIndex:1,
                number:2,
                pageCount:null,
                dataCount:null
            },
            //新增camp模态框默认关闭
            addDialogVisible:false
        },
        created:function () {
            this.selectCamp();
        },
        methods:{
            //查询营地信息
            selectCamp(){
                var _this = this;
                $.ajax({
                    url: "/camp/selectCamp",
                    type: "get",
                    data: {
                        "index":_this.page.pageIndex,
                        "number":_this.page.number,
                        "cityName":_this.cityName,
                        "campName":_this.campName
                    },
                    dataType: "json",
                    success: function(data) {
                        _this.tableData=data.list,
                            _this.page.pageIndex = data.obj.pageIndex;
                        _this.page.number = data.obj.number;
                        _this.page.pageCount = data.obj.pageCount;
                        _this.page.dataCount = data.obj.count;
                    },
                    error: function(data) {
                        alert(data.responseJSON.message);
                    }
                });
            },
            handleEdit:function(index, row) {
                console.log(index, row);
            },
            handleDelete:function(index, row) {
                console.log(index, row);
            },
            //分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.page.number = val;
                this.selectCamp();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.page.pageIndex = val;
                this.selectCamp();
            },
            //模态框确认
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            }
        },
        watch:{

        }
    })
</script>
</body>
</html>